<!-- 这是一个分享菜单组件 -->
<template>
	<view class="share" :hover-stop-propagation="true" v-show="showMenu" @click.stop="toggle" @touchmove.stop.prevent="preventPop">
		<view class="share-menu">
			<view class="share-grid">
				<view class="share-grid-item" hover-class="share-grid-item-hover" @click.stop="share('wechat')">
					<image class="share-icon" src="/static/sharemenu/wechatfriend.png" mode="scaleToFill"></image>
					<text class="title">微信好友</text>
				</view>
				<view class="share-grid-item" hover-class="share-grid-item-hover" @click.stop="share('pyq')">
					<image class="share-icon" src="/static/sharemenu/wechatmoments.png" mode="scaleToFill"></image>
					<text class="title">朋友圈</text>
				</view>
				<view class="share-grid-item" hover-class="share-grid-item-hover" @click.stop="share('qq')">
					<image class="share-icon" src="/static/sharemenu/qq.png" mode="scaleToFill"></image>
					<text class="title">QQ</text>
				</view>
				<view class="share-grid-item" hover-class="share-grid-item-hover" @click.stop="share('sina')">
					<image class="share-icon" src="/static/sharemenu/weibo.png" mode="scaleToFill"></image>
					<text class="title">新浪微博</text>
				</view>
				<view class="share-grid-item" hover-class="share-grid-item-hover" @click.stop="share('more')">
					<image class="share-icon" src="/static/sharemenu/more.png" mode="scaleToFill"></image>
					<text class="title">更多</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'showMenu',
			event: 'toggle'
		},
		props: {
			showMenu: {
				type: Boolean,
				default: false
			},
		},
		data() {
		},
		methods: {
			// 阻止滑动的冒泡事件
			preventPop() {
				return
			},
			toggle () {
				this.$emit('toggle', !this.showMenu);
			},
			share (type) {
				this.$emit('shareto', type);
			}
		}
	}
</script>

<style lang="scss">
.share {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1000;
	background-color: rgba(000,000,000,.3);
	.share-menu {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		.share-grid {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			.share-grid-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 40upx 0;
				.share-icon {
					width: 88upx;
					height: 88upx;
				}
				.title {
					font-size: 16upx;
					color: #999;
				}
			}
			.share-grid-item-hover {
				background-color: #e2e2e2;
			}
		}
	}
}
</style>
